<script setup lang="ts">
import { PropType, reactive } from 'vue'
import type { TableData } from '@/api/table/types'
import { Descriptions } from '@/components/Descriptions'
import { useI18n } from '@/hooks/web/useI18n'
import { ElTag } from 'element-plus'
import { DescriptionsSchema } from '@/types/descriptions'

const { t } = useI18n()

defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  }
})

const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'microcircleId',
    label: t('page.microcircleId'),
  },
  {
    field: 'userName',
    label: t('page.bfusername'),
  },
  {
    field: 'articleTitle',
    label: t('page.articleTitle'),span:24
  },
  {
    field: 'articleUrl',
    label: t('page.url'),
    span:24
  },
  {
    field: 'createDate',
    label: t('page.createDate'),
  },
  {
    field: 'userAccount',
    label: t('page.account'),
  },
  {
    field: 'articleLike',
    label: t('page.articleLike'),
  },
  {
    field: 'articleHits',
    label: t('page.articleHits'),
  },
  {
    field: 'articleReviews',
    label: t('page.articleReviews'),
  },
  {
    field: 'articleShare',
    label: t('page.articleShare'),
  }
])
</script>

<template>
  <Descriptions  :schema="schema" :data="currentRow || {}">
    <template #content="{ row }: { row: TableData }">
      <div v-html="row.content"></div>
    </template>

    <template #articleUrl="{row}">
        <img src="row.articleUrl">
    </template>
  </Descriptions>
</template>
